<template>
  <!-- 雪碧进度图组件 -->
  <div
    class="main"
    :style="`
      width:${width}px;
      height:${height}px`"
    @mouseenter="handleMouseEnter"
    @mousemove="handleMouseMove"
    @mouseleave="handleMouseLeave"
  >
    <div
      class="process"
      ref="process"
    >
      <div
        class="process-bar"
        ref="bar"
      ></div>
    </div>
    <div
      class="content"
      ref="content"
      :style="`
        width:${width}px;
        height:${height}px;
        top:${height-offset}px;`"
    >
      <div class="title border-title">主题：{{title}}</div>
      <slot />
    </div>
    <div
      class="img"
      :style="`
        width:${width}px;
        height:${height}px;
        background-size:${width*img.col}px;
        background-image: url('${img.src}');`"
      ref="video"
    ></div>
    <div class="ctrl">
      <slot name="ctrl" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProcessVideo',
  props: {
    width: {
      type: Number,
      default: 384
    },
    height: {
      type: Number,
      default: 216
    },
    title: {
      type: String,
      default: '会议标题'
    },
    img: {
      type: Object,
      default: () => ({
        src:
          'https://user-images-1257142679.cos.ap-chengdu.myqcloud.com/297ae4d56151ec265deaa0a775e2b1d3',
        row: 4,
        col: 10,
        total: 40
      })
    }
  },
  data () {
    return {
      offset: 50,
      content: '会议摘要内容',
      tooltipVisible: true
    }
  },
  watch: {
    content () {
      this.tooltipVisible = false
      this.tooltipVisible = true
    }
  },
  mounted () {},
  methods: {
    handleMouseEnter () {
      this.$refs.process.style.opacity = '1'
      this.$refs.content.style.top = '0'
      this.$emit('enter')
    },
    handleMouseMove (e) {
      const index = parseInt((e.offsetX * this.img.total) / this.width)
      const indexX = index % this.img.col
      const indexY = parseInt(index / this.img.col)
      this.$refs.video.style.backgroundPositionX = -this.width * indexX + 'px'
      this.$refs.video.style.backgroundPositionY = -this.height * indexY + 'px'
      this.$refs.bar.style.width = (e.offsetX / this.width) * 100 + '%'
      // this.content = this.contents[index]
    },
    handleMouseLeave () {
      this.$refs.video.style.backgroundPositionX = '0px'
      this.$refs.video.style.backgroundPositionY = '0px'
      this.$refs.process.style.opacity = '0'
      this.$refs.content.style.top = this.height - this.offset + 'px'
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  &:hover::before {
    opacity: 1;
  }
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    transition: opacity 0.2s;
  }
  .process {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #999;
    border-width: 4px 8px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: all 0.2s linear;
    .process-bar {
      display: block;
      height: 2px;
      width: 0;
      background-color: #fff;
    }
  }
  .content {
    position: absolute;
    z-index: 2;
    width: 100%;
    left: 0;
    transition: top 0.2s;
    padding: 26px 10px 10px;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 1);
    font-size: 12px;
    .title {
      color: orange;
      line-height: 30px;
      font-size: 18px;
      font-weight: bold;
    }
  }
  .img {
    background-position: 0px 0px;
  }
  .ctrl {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999;
  }
}
.atooltip {
  font-size: 15px;
  width: 180px;
}
</style>
